<template>
    <main-layout>
        <header>
            <div class="app-header-wrapper">
                <van-search v-model="value" placeholder="搜索商品名称" />
                <div @click="$router.push('/login')">
                    <img src="../../images/icon-user.png">
                </div>
            </div>
        </header>
        <div class="home-box">
            <div class="home-content">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="it in bannerList" :key="it.id">
                        <img v-lazy="it.image" width="100%" height="100%" />
                    </van-swipe-item>
                </van-swipe>

                <ul class="types-list">
                    <li>
                        <img src="../../images/types/icon-1.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-2.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-3.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-4.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-5.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-6.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-7.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-8.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-9.png" alt="">
                    </li>
                    <li>
                        <img src="../../images/types/icon-10.png" alt="">
                    </li>
                </ul>

                <div class="ad-box">
                    <div class="box1">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29b39579739d82269d18f0e7c8f6c9da.jpg?f=webp&w=537&h=762&bg=57524C" alt="">
                    </div>
                    <div class="box2">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b9af94e5c05bb2b4849cbb113eddb9d.jpg?f=webp&w=537&h=378&bg=EBF8FF" alt="">
                        </div>
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a12873ff30a6da401d74728878625c37.jpg?f=webp&w=537&h=378&bg=D2EDFF" alt="">
                        </div>
                    </div>
                </div>

                <div class="hot-sale-box">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beac5a54f4f4d93cb3f680a097b4f644.jpg?f=webp&w=1080&h=660&bg=F5F5F5" alt="">
                </div>

                <div class="product-content">
                    <div class="product-box" v-for="(p,index) in productList" :key="p.id">
                        <img :src="p.image" alt="">
                        <div class="youhui"><img :src="p.youhui" alt=""></div>
                        <div class="name">{{p.name}}</div>
                        <div class="brief">{{p.brief}}</div>
                        <div class="price"><em>￥</em>{{p.price}}起</div>
                        <div class="btn">
                            <van-button square
                                @click="addCart(index)"
                                color="#ea625b">添加到购物车</van-button>
                        </div>
                    </div>
                </div>

                <div class="computer-box">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/393a90da633889384d35acb7c44eeb17.jpg?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
                </div>

                <div class="computer-content">
                    <div class="product-box" v-for="c in computerList" :key="c.id">
                        <img :src="c.image" alt="">
                        <div class="name">{{c.name}}</div>
                        <div class="brief">{{c.brief}}</div>
                        <div class="price"><em>￥</em>{{c.price}}起</div>
                        <div class="btn">
                            <van-button square
                                color="#ea625b">添加到购物车</van-button>
                        </div>
                    </div>
                </div>

                <div class="types-content">
                    <div class="product-box" v-for="t in typesList" :key="t.id">
                        <img :src="t.image" alt="">
                    </div>
                </div>

                <div class="old-to-new-box">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg?f=webp&w=1080&h=420&bg=873FFA" alt="">
                </div>

            </div>
        </div>
    </main-layout>
</template>

<script>
import MainLayout from '../../components/MainLayout.vue'
import homeApi from '../../apis/homeApi'

    export default {
    components: { MainLayout },
        data() {
            return {
                value: '',
                bannerList: [],
                productList: [],
                computerList: [],
                typesList: [],
                cart:[]
            }
        },

        watch:{
            cart:{
                // immediate:true,
                deep:true,
                handler(){
                    window.localStorage.setItem('cart',JSON.stringify(this.cart)) || []
                }
            }
        },

        created(){
            this.getList()
            this.getPList()
            this.getCList()
            this.getTList()
            this.cart = JSON.parse(window.localStorage.getItem('cart')) || []
        },

        methods: {
            async getList() {
                let result = await homeApi.getBannerListApi()
                if (result.code === 200) {
                    this.bannerList = result.data.rows
                }
            },
            async getPList(){
                let result = await homeApi.getProductListApi()
                if (result.code === 200) {
                    this.productList = result.data.rows
                }
            },
            async getCList(){
                let result = await homeApi.getComputerListApi()
                if (result.code === 200) {
                    this.computerList = result.data.rows
                }
            },
            async getTList(){
                let result = await homeApi.getTypesListApi()
                if (result.code === 200) {
                    this.typesList = result.data.rows
                }
            },

            addCart(index){
                const p = this.productList[index]
                // debugger
                const result = this.cart.find(ele => ele.id === p.id)
                if(result){
                    result.amount += 1
                    alert('亲！购物车已经有了呢！但是数量给你增加了哦')
                } else {
                    this.cart.push({id:p.id,image:p.image,name:p.name,price:p.price,amount:1})
                    alert('亲！添加成功，您的宝贝正在购物车等着你结算呢！')
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    header{
        display: block;
        background-color: #f2f2f2;
        height: 46px;
        overflow: hidden;
        > .app-header-wrapper{
            display: flex;
            height: 46px;
            width: 100%;
            > .van-search{
                width: 336px;
                padding: 0;
                margin: 3px 5px;
                border: none;
                background: #f2f2f2;
            }
            > div{
                height: 46px;
                width: 50px;
                > img{
                    height: 22px;
                    width: 22px;
                    margin-top: 12px;
                    margin-left: 14px;
                }
            }
        }
    }
    .home-box{
        display: block;
        position: relative;
        height: 100%;
        overflow-x: hidden;
        > .home-content{
            width: 390px;
            height: 100%;
            > .van-swipe{
                width: 390px;
                height: 195px;
                overflow: hidden;
            }
            > .types-list{
                height: 164px;
                width: 100%;
                overflow: hidden;
                > li{
                    height: 82px;
                    width: 78px;
                    float: left;
                    > img{
                        height: 82px;
                        width: 78px;
                    }
                }
            }
            > .ad-box{
                width: 100%;
                height: 275px;
                overflow: hidden;
                > .box1{
                    width: 194px;
                    height: 275px;
                    float: left;
                    > img{
                        width: 194px;
                        height: 275px;
                    }
                }
                >.box2{
                    width: 194px;
                    height: 275px;
                    float: left;
                    > div{
                        width: 194px;
                        height: 137px;
                        > img{
                            width: 194px;
                            height: 137px;
                        }
                    }
                }
            }
            > .hot-sale-box{
                width: 390px;
                height: 239px;
                > img{
                    widows: 390px;
                    height: 239px;
                }
            }
            > .product-content{
                width: 390px;
                overflow: hidden;
                > .product-box{
                    width: 194px;
                    height: 266px;
                    float: left;
                    position: relative;
                    > img{
                        width: 187px;
                        height: 152px;
                    }
                    .youhui{
                        position: absolute;
                        top: 105px;
                        left: 135px;
                        img{
                            width: 85%;
                            height: 85%;
                        }
                    }
                    > .name{
                        font-size: 15px;
                        color: rgba(0,0,0,.87);
                        text-align: center;
                    }
                    > .brief{
                        font-size: 12px;
                        color: rgba(0,0,0,.54);
                        text-align: center;
                    }
                    > .price{
                        font-size: 14px;
                        color: #ea625b;
                        text-align: center;
                    }
                    > .btn{
                        text-align: center;
                    }
                }
            }
            > .computer-box{
                width: 390px;
                height: 239px;
                > img{
                    widows: 390px;
                    height: 239px;
                }
            }
            > .computer-content{
                width: 390px;
                overflow: hidden;
                > .product-box{
                    width: 194px;
                    height: 266px;
                    float: left;
                    > img{
                        width: 187px;
                        height: 152px;
                    }
                    > .name{
                        font-size: 15px;
                        color: rgba(0,0,0,.87);
                        text-align: center;
                    }
                    > .brief{
                        font-size: 12px;
                        color: rgba(0,0,0,.54);
                        text-align: center;
                    }
                    > .price{
                        font-size: 14px;
                        color: #ea625b;
                        text-align: center;
                    }
                    > .btn{
                        text-align: center;
                    }
                }
            }
            > .types-content{
                width: 390px;
                margin-top: 10px;
                overflow: hidden;
                > .product-box{
                    width: 194px;
                    height: 260px;
                    float: left;
                    > img{
                        width: 194px;
                        height: 260px;
                    }
                }
            }
            > .old-to-new-box{
                width: 390px;
                height: 152px;
                margin-top: 10px;
                > img{
                    width: 390px;
                    height: 152px;
                }
            }
        }
        
    }
</style>